<template>
  <div class="MV">
    <div v-for="(item, index) in mvMsg"
         :key="index"
         class="itemInfo"
    >
      <img v-lazy="item.imgurl" alt="" @click="goRoute(item)">
      <div class="playCount">
        <img style="width: 20px;height:20px;position: relative;top: -4px;"src="~@/assets/img/home/play-m.svg" alt="" >
        <div>{{ (item.playCount/10000).toFixed()}}</div>
        <span>万</span>
      </div>
      <div class="duration">{{item.duration | duration}}</div>
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
  import {home} from "@/network/home";
  import {format} from "@/components/common/utilis";

  export default {
    name: "SingerMV",
    data(){
      return{
        mvMsg:[], //mv封面数据
      }
    },
    filters:{
      // 格式化歌曲时间
      duration(value){
        return format(value/1000)
      },
    },
    created() {
      this.getSingerMV(this.$route.params.id)
    },
    watch:{
      //监听歌手id是否变化，变化就更新数据
      '$route.params.id'(){
        //获取相似歌手数据
        this.getSingerMV(this.$route.params.id)
      },
    },
    methods:{
      //跳转到mv详情页面
      goRoute(item){
        this.$router.push('/mvdetail/id=' + item.id)
      },
      //获取MV封面数据
      getSingerMV(id){
        home.getSingerMV(id).then(res => {
          this.mvMsg = res.data.mvs
        })
      },
    },
  }
</script>

<style scoped>
.MV{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /*这是歌单详情路由的父组件，此代码防止两个组件的滚动条冲突，*/
  overflow-y: hidden;
  padding-top: 20px;
}
.itemInfo{
  width: 21%;
  margin-bottom: 20px;
  position: relative;
}
.itemInfo img:nth-child(1){
  width: 100%;
  height: 135px;
  border-radius: 7px;
  cursor: pointer;
}
.itemInfo p{
  font-size: 14px;
  color: rgb(92, 81, 81);
  line-height: 20px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.playCount{
  position: absolute;
  top: 5px;
  right: 5%;
  display: flex;
  font-size: 12px;
  color: white;
}
.duration{
  position: absolute;
  right: 5%;
  top: 115px;
  font-size: 14px;
  color: #F4F4F4;
}
</style>
